*{
  margin:0;
  padding:0;
}
root{
  font-size:10px;
}
body{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#ddd;
}

input{
  width:10vw;
  outline:none;
  border:none;
}
input[type='file']{
  display: none;
}

button{
  border: none;
  background-color: mistyrose;
  color:indianred;
  font-size:1rem;
  width:6rem;
  height:2rem;
  border-radius:5px;
  outline: 1px solid #555;
}

button:hover{
  outline: 2px solid #000;
}

#root{
  width:90vw;
  height:95vh;
  background-color:#fff;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  overflow: hidden;
}

/* 页头栏 */
header{
  position:relative;
  box-sizing:border-box;
  display:flex;
  width:inherit;
  padding:1vh 2vh;
  border-radius:10px 10px 0 0;
}
/* 标题 */
.title{
  display:inline-block;
  position: relative;
  height:2rem;
  min-width:10vw;
  line-height:2rem;
  font-size:1rem;
  padding-left:1vw;
  margin-right:3vw;
  color:#333;
  /* background-color: aqua; */
  font-weight:bold;
}

/* 返回键 */
.return{
  height:2rem;
  width:2rem;
  text-align:center;
}
/* 图标 */
.icon{
  position:relative;
  display:inline-block;
  width:70%;
  height:70%;
  top:50%;
  transform:translateY(-50%);
}
/* 工具栏 */
.tool{
/*   flex-grow:1; */
  height:2rem;
  line-height:2rem;
  margin-right: 2vw;
  display:flex;
  /* background-color:yellow; */
}
header .tool[data-index="0"]{
  width:5vw;
}
header .tool[data-index="1"]{
  width:15vw;
}
header .tool[data-index="2"]{
  width:20vw;
}
/* 操纵窗口 */
#handleWindow{
  position:absolute;
  right:2vh;
  width:8vw;
  height:2rem;
  display:flex;
  justify-content: flex-end;
}
/* 主界面 */
#main{
  height:100%;
  width:100%;
  border-radius:0 0 10px 10px;
  display:flex;
}
#canvas{
  position:relative;
  width:70vw;
  background-color:#fff;
  border-radius:0 0 0 10px;
  overflow:auto;
}
#canvas::-webkit-scrollbar{
  width:0 !important;
}
#mindmap{
  position:relative;
  background-color:mistyrose;
}

.item{
  position:absolute;
/*    */
  top:150px;
  left:150px;
/*    */
  box-sizing:border-box;
  display:inline-block;
  min-width:120px;
  padding:8px 20px;
  text-align:center;
  /* background-color:rgb(138, 231, 184); */
  background-color:Salmon;
  /* gold */
  border-radius:20px;
  color:#fff;
  font-size:1.3rem;
  cursor:default;
  word-break:break-all;
}

.item[data-level = '1']{
  min-width:80px;
  padding:4px 12px;
  font-size:1rem;
  /* background-color:rgb(227, 248, 237); */
  /* color:CadetBlue; */
  background-color: MistyRose;
  color:indianred;
  /*  background-color:Linen;
  color:	DarkGoldenrod;*/
  /* border:2px solid 	MediumAquamarine; */
  border-radius:10px;
}
.item[data-level = '2']{
  min-width:50px;
  padding:2px 8px;
  font-size:.9rem;
  background-color:transparent;
  color:#666;
  /* border-bottom: 1px solid MediumAquamarine; */
  border-bottom: 1px solid 	LightCoral;
  border-radius:0px;
}

.item:not(div[data-input = 'true']):hover{
  outline:2px solid #333;
}

input.item{
/*   background-color:red; */
  outline:2px solid #333;
  position:absolute;
  top:0;
  left:0;
}

.transparent{
  opacity: 0;
}
.hidden{
  display: none;
}

.btn, .addNodeIcon{
  height:2rem;
  text-align: center;
  cursor:pointer;
}
.addNodeIcon:hover,.btn:hover{
  background-color: beige;
}
.addNodeIcon .icon{
  height:120%;
}
.btn .icon{
  height:100%;
}

.moving{
  opacity: .5;
}

ul{
  position: relative;
  list-style: none;
}

li{
  position: relative;
  margin-left: 20px;
}

#outline{
  /* background-color:	GhostWhite; */
  background-color:Snow;
  width:20vw;
  height:inherit;
  border-radius:0 0 10px 0;
  overflow-y: auto;
}
.li{
  display:inline-block;
  position:relative;
  box-sizing: border-box;
  width:100%;
  padding:4px 4px;
  border-radius:6px;
  margin:5px 5px;
  /* background-color: rgb(211, 255, 228); */
  background-color: mistyrose;
    /* background-color: lavenderblush; */
  color:#555;
}

#outline a{
  display: inline-block;
  height:1.4rem;
}

#outline a .icon{
  position: relative;
  width:100%;
  transform-origin:center;
  top:50%;
  transform: translateY(-50%) rotate(90deg);
  margin-right:12px;
}

#uploadImage{
  position: absolute;
  background-color:snow;
  width:15rem;
  height:8rem;
  top:100%;
  margin-top:1rem;
  z-index: 50;
  border-radius:1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#uploadImage > div{
  position: relative;
  box-sizing: border-box;
  width:80%;
  height:80%;
  text-align: center;
  outline: 1px solid #aaa;
  border-radius: 10px;
  overflow: hidden;
  padding:1rem 0;
  color:#888;
  font-size:.8rem;
}

#uploadImage .icon{
  width:3rem;
}

.imgShow{

  width:8rem;
}